<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
    <form action="/">
      <van-search v-model="searchText" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" background="#3296fa" />
    </form>
    <!--/ 搜索栏 -->

    <!-- 搜索结果 -->
    <SearchResult v-if="isSearchResultShow" />
    <!-- /搜索结果 -->

    <!-- 搜索建议 -->
    <SearchSuggest :sonSearchText="searchText" v-else-if="searchText" />
    <!-- /搜索建议 -->

    <!-- 搜索历史记录 -->
    <SearchHistory v-else />
    <!-- /搜索历史记录 -->
  </div>
</template>
<script>
import SearchHistory from './component/search-history.vue'
import SearchSuggest from './component/search-suggest.vue'
import SearchResult from './component/seaerch-result.vue'

export default {
  data() {
    return {
      searchText: '', // 搜索内容
      isSearchResultShow: false // 搜索结果是否显示
    }
  },
  components: {
    SearchHistory,
    SearchSuggest,
    SearchResult
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onSearch(val) {
      // this.$Toast(val)
      console.log(val)
      // 触发搜索事件，显示搜索结果
      this.isSearchResultShow = true
    },
    onCancel() {
      // this.$Toast('取消')
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.search-container {
  .van-search__action {
    color: #fff;
  }
  .van-search__content {
    border-radius: 6px;
  }
}
</style>
